<template>
  <div class="th">
    <el-form :model="ruleForm"
             :rules="rules"
             ref="ruleForm"
             label-width="120px"
             class="yuyi-ruleForm">
      <el-form-item label="登记日期" prop="dates">
        <el-input placeholder="" v-model="ruleForm.dates"></el-input>
      </el-form-item>
      <el-form-item label="库房" prop="storageRoom" class="inline">
        <el-select v-model="ruleForm.storageRoom" size="small" style="width: 100%">
          <el-option v-for="(item, index) in houseTree"
                     :key="index"
                     :value="item.nodeName"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="温度°C" prop="temperatures">
        <el-input placeholder="请输入温度" v-model="ruleForm.temperatures"></el-input>
      </el-form-item>
      <el-form-item label="湿度%rh" prop="humiditys">
        <el-input placeholder="请输入湿度" v-model="ruleForm.humiditys"></el-input>
      </el-form-item>
      <el-form-item label="情况描述">
        <el-input type="textarea"
                  show-word-limit
                  maxlength="200"
                  placeholder="请输入情况描述"
                  :autosize="autosize"
                  v-model="ruleForm.remarks"></el-input>
      </el-form-item>
      <el-form-item >
        <el-button :loading="saveLoading" type="primary" size="small" @click="onSubmit('ruleForm')">确定</el-button>
        <el-button :loading="saveLoading" size="small" @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { getHouseTree } from '../../../../../api/house/houseArchives'
import { formateDate, getToday } from '../../../../../util/util'

export default {
  name: 'addTHRegister',
  props: {
    type: {
      type: String,
      request: true
    },
    saveLoading: {
      type: Boolean
    },
    rowData: {
      type: Object,
      default: () => ({})
    }
  },
  data () {
    return {
      houseTree: [], // 库房
      autosize: {
        minRows: 4,
        maxRows: 6
      },
      ruleForm: {
        dates: '',
        storageRoom: '',
        temperatures: '',
        humiditys: '',
        remarks: ''
      },
      rules: {
        dates: [
          { required: true, message: '请填写日期' }
        ],
        storageRoom: [
          { required: true, message: '请选择库房' }
        ]
      }
    }
  },
  mounted () {
    this.getHouse()
    if (this.type === 'edit') {
      this.ruleForm = this.rowData
      this.ruleForm.dates = formateDate(this.rowData.dates)
    } else {
      this.ruleForm = {}
      this.ruleForm.dates = getToday() // (new Date()).toLocaleDateString().split('/').join('-')
    }
  },
  watch: {
    rowData: {
      handler: function () {
        if (this.type === 'edit') {
          this.ruleForm = this.rowData
          this.ruleForm.dates = formateDate(this.rowData.dates)
        } else {
          this.ruleForm = {}
          this.ruleForm.dates = getToday() // (new Date()).toLocaleDateString().split('/').join('-')
        }
      },
      deep: true
    }
  },
  methods: {
    getHouse () {
      getHouseTree().then(res => {
        this.houseTree = res.data.data
      })
    },
    onSubmit (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$emit('onSubmit', this.ruleForm)
        } else {
          return false
        }
      })
    },
    resetForm (formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>

<style lang="scss" scoped>
.th{
  padding-right: 40px;
}
</style>
